<script setup lang="ts">
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { appName } from '~/constants'

useHead({
  title: appName,
})

const globalStore = useGlobalStore()
const isBigCharMode = computed(() => {
  return globalStore.isBigCharMode
})
onMounted(() => {
  // console.log(globalStore.isBigCharMode)
  if (isBigCharMode.value) {
    if (import.meta.client) {
      document.body.classList.add('big-char-mode')
    }
  }
  document.addEventListener('wheel', (event) => {
    if (event?.ctrlKey === true) {
      // 阻止默认行为，防止滚轮缩放
      event.preventDefault()
    }
  }, { passive: false })
})
watch(() => globalStore.isBigCharMode, (val) => {
  if (import.meta.client) {
    document.body.classList[val ? 'add' : 'remove']('big-char-mode')
  }
})
</script>

<template>
  <VitePwaManifest />
  <NuxtLayout>
    <div>
      <NuxtLoadingIndicator color="var(--color-primary)" />
      <el-config-provider :locale="zhCn">
        <NuxtPage
          :transition="{
            name: 'bounce',
            mode: 'out-in',
          }"
        />
      </el-config-provider>
    </div>
  </NuxtLayout>
</template>

<style>
@import '~/assets/style/global.scss';
</style>
